<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#box{
			width:50px; height: 50px; background: blue;
			position: absolute; left: 100px; top: 150px;
			border-radius: 50%;
		}
	</style>
	<script src="js/draggable.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		move(obj,{left:600,top:400,width:100,height:100})
		//缓冲运动
		onload = function(){
			var box = document.getElementById("box");
			var degree = 0; //角度
			var distance = 800-box.offsetLeft-box.offsetWidth;
			//计算初始位置，设为参考系原点
			var centerPoint = {x:box.offsetLeft, y:box.offsetTop};
			var t = setInterval(function(){
				//Math.sin(弧度)
				var s = distance*Math.sin(degree*Math.PI/180);
				box.style.left = centerPoint.x + s + "px";
				
				if(degree == 90){
					clearInterval(t);
					return;
				}
				degree++;
				
			},30);
		}
	</script>
	<body>
		<div id="box">
			
		</div>
		<div id="wall" style="width: 1px; height: 100%; position: absolute; left:800px; top: 0; background: black;">
			
		</div>
	</body>
</html>
